// 富文本编辑器
initEditor()

// 筛选
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    if (res.status === 0) {
      let str = ''
      res.data.forEach(item => {
        str += `
      <option value ="${item.id}">${item.name}</option>
      `
      })
      $('select').html(str)
      // 更新渲染
      let form = layui.form
      form.render()
    }
  }
})

// -------------------------------------封面-----------------------------
// 1. 初始化图片裁剪器
var $image = $('#image')

// 2. 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)

//  contains("内容")  选择包含内容的标签
$('button:contains("选择封面")').on('click', function () {
  // 触发文件域的单击事件
  $('#file').trigger('click')
})

// ------------------------图片预览-------------------------
// 文件域内容改变,更换剪裁区的图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    // 获取文件对象
    let fileObj = this.files[0]
    // 创建URL
    let url = URL.createObjectURL(fileObj)
    // 更换剪裁区的图片
    $image.cropper('replace', url)
  }
})


// --------------------------------添加文章-------------------------
// 表单提交 --> 阻止默认行为 --> 收集数据 --> ajax提交
$('form').on('submit', function (ev) {
  ev.preventDefault()
  // 使用FormData收集表单数据
  let fd = new FormData(this)
  fd.set('content', tinyMCE.activeEditor.getContent())
  let canvas = $image.cropper('getCroppedCanvas', { width: 400, height: 280 })
  canvas.toBlob(function (blob) {
    fd.append('cover_img', blob)
    // 检查fd中有哪些数据,只能通过forEach遍历
    // fd.forEach((value, key) => {
    //   console.log(key, value);
    // })
    $.ajax({
      type: 'POST',
      url: '/my/article/add',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        location.href = './list.html'
      }
    })
  })

})
